<template>
    <div id="orderDetail">
        <van-nav-bar id="banner" title="" @click-left="onClickLeft">
            <template #title>
                <div style="color: grey;">
                    广科大校园在线点餐
                </div>
            </template>
            <template #left>
                <div style="color:white">
                    <van-icon name="arrow-left" color="white" />
                    返回
                </div>
            </template>
        </van-nav-bar>

        <div style="height: 10px;"></div>

        <van-steps v-if="this.order.status!='8'"  active-icon="success" active-color="gold" style="width: 85%;margin-left: 5%;border-radius: 5px;" :active="active">
            <van-step>待支付</van-step>
            <van-step>已支付</van-step>
            <van-step>派送中</van-step>
            <van-step>已送达</van-step>
        </van-steps>
        <div style="height: 10px;"></div>

        <div id="box3">
            <van-cell-group inset>
                <van-cell :title="order.shopName" style="font-weight: 700;" />
                <van-cell v-for="(food,index) in order.foodList" :key="index">
                    <template #title>
                        <span style="color:gray">{{food.name}}</span> <span
                            style="font-size: 8px;color: gray;">{{'x'+food.num}}</span>
                    </template>
                    <template>
                        <div class="van-ellipsis"> <span style="color:black">{{(food.num*food.price).toFixed(2)}}</span>
                        </div>
                    </template>
                </van-cell>
                <van-cell>
                    <template #title>
                        <span style="color:gray">总价</span>
                    </template>
                    <template>
                        <div class="van-ellipsis">¥ <span style="color:black">
                                {{(order.totalMoney*1.0).toFixed(2)}}</span></div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>

        <div style="height: 10px;"></div>

        <div id="box1">
            <van-cell-group inset>
                <van-cell title="配送信息" style="font-weight: 700;" />
                <van-cell>
                    <template #title>
                        <span style="color:gray">期望时间</span>
                    </template>
                    <template>
                        <div class="van-ellipsis"> <span style="color:black">立即配送</span></div>
                    </template>
                </van-cell>
                <van-cell>
                    <template #title>
                        <span style="color:gray">配送地址</span>
                    </template>
                    <template>
                        <div class="van-ellipsis"> <span style="color:black">{{order.address}}</span></div>
                        <div class="van-ellipsis"> <span style="color:black">{{order.username+'(同学)'+order.tel}}</span>
                        </div>
                    </template>
                </van-cell>
                <van-cell>
                    <template #title>
                        <span style="color:gray">配送服务</span>
                    </template>
                    <template>
                        <div class="van-ellipsis"> <span style="color:black">科大校园专送</span></div>
                    </template>
                </van-cell>

                <van-cell>
                    <template #title>
                        <span style="color:gray">配送骑手</span>
                    </template>
                    <template>
                        <div class="van-ellipsis"> <span style="color:black">XXX</span></div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>

        <div style="height: 10px;"></div>

        <div id="box2">
            <van-cell-group inset>
                <van-cell title="订单时间" style="font-weight: 700;" />
                <van-cell>
                    <!-- <template #title>
                        <span style="color:gray">订单号码</span>
                    </template> -->
                    <template>
                        <div style="display:flex;">
                            <span style="color:gray">订单号码</span>
                            <div style="width: 11%"></div>
                            <div> <span style="color:black;font-size: 8px;">{{order.serialNum}}</span></div>
                        </div>
                    </template>
                </van-cell>
                <van-cell>
                    <van-cell>
                        <template #title>
                            <span style="color:gray">下单时间</span>
                        </template>
                        <template>
                            <div class="van-ellipsis"> <span style="color:black">{{order.createTime}}</span></div>
                        </template>
                    </van-cell>
                    <van-cell>
                        <template #title>
                            <span style="color:gray">支付方式</span>
                        </template>
                        <template>
                            <div class="van-ellipsis"> <span style="color:black">在线支付</span></div>
                        </template>
                    </van-cell>
                    <van-cell>
                        <template #title>
                            <span style="color:gray">餐具</span>
                        </template>
                        <template>
                            <div class="van-ellipsis"> <span style="color:black">1份</span></div>
                        </template>
                    </van-cell>
                </van-cell>

            </van-cell-group>
        </div>
        <div style="height: 50px;"></div>

    </div>
</template>
<script>
    export default {
        name: 'OrderDetail',
        data() {
            return {
                order: {},
                active:0
            }
        },
        components: {},
        computed: {},
        beforeMount() {},
        mounted() {
            console.log('111')
            this.order = JSON.parse(sessionStorage.getItem("orderDetail"))
            if(this.order.status == '2')
               this.active = 0
            else if(this.order.status == '1')
               this.active = 2
            else if(this.order.status == '5')
                this.active = 3
        },
        methods: {
            onClickLeft() {
                this.$router.push('/manager/order/')
                console.log();
            },
        },
        watch: {},
    }
</script>
<style scoped>
    #orderDetail {
        width: 100%;
        /* height: 600px; */
        background-color: rgba(128, 128, 128, 0.066);
        overflow: scroll;
        padding-bottom: 10px;
    }

    #box1 {
        width: 95%;
        height: 270px;
        margin-left: 2%;
        margin-top: 10px;
        border-radius: 5px;
        background-color: white;
    }

    #box02 {
        width: 98%;
        height: 270px;
        margin-left: 2%;
        margin-top: 10px;
        border-radius: 5px;
        background-color: white;
    }

    #box03 {
        width: 95%;
        height: 270px;
        margin-left: 2%;
        margin-top: 10px;
        border-radius: 5px;
        background-color: white;
    }

    #banner {
        background-color: gold;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
</style>